<template>
  <div class="XingZuo" id="XingZuo">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="选择星座">
        <el-select v-model="form.xingzuoSelect" placeholder="请选择星座" @change="changeSelect">
          <el-option
            v-for="each_xz in all_xingzuo"
            :label="each_xz.value"
            :value="each_xz.key"
            :key="each_xz.name"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <hr />
    <div id="xingzuo_lable">
      <el-tabs>
        <el-tab-pane label="本周指南">
          <div id="today" style>
            <el-input type="textarea" name="name" rows="8" cols="80" v-model="content.common"></el-input>
          </div>
        </el-tab-pane>
        <el-tab-pane label="今日运势">
          <el-input type="textarea" name="name" rows="8" cols="80" v-model="content.ri"></el-input>
        </el-tab-pane>
        <el-tab-pane label="本周运势">
          <el-input type="textarea" name="name" rows="8" cols="80" v-model="content.zhou"></el-input>
        </el-tab-pane>
        <el-tab-pane label="本月运势">
          <el-input type="textarea" name="name" rows="8" cols="80" v-model="content.yue"></el-input>
        </el-tab-pane>
        <el-tab-pane label="本年运势">
          <el-input type="textarea" name="name" rows="8" cols="80" v-model="content.nian"></el-input>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "XingZuo",
  data() {
    return {
      message: "星座运势",
      rep_data: "星座运势",
      xingzuo_suffix: "xingzuo_html",
      ttl_key: "xingzuo_time",
      common_key: "common_key",
      xingzuo_data_key: "xingzuo_data",
      content: {
        common: "",
        ri: "",
        zhou: "",
        yue: "",
        nian: "",
      },
      form: {
        xingzuoSelect: "处女座",
      },
      all_xingzuo: [
        {
          key: "白羊座",
          value: "白羊座 (3.21-4.19)",
        },
        {
          key: "金牛座",
          value: "金牛座 (4.20-5.20)",
        },
        {
          key: "双子座",
          value: "双子座 (5.21-6.21)",
        },
        {
          key: "巨蟹座",
          value: "巨蟹座 (6.22-7.22)",
        },
        {
          key: "狮子座",
          value: "狮子座 (7.23-8.22)",
        },
        {
          key: "处女座",
          value: "处女座 (8.23-9.22)",
        },
        {
          key: "天秤座",
          value: "天秤座 (9.23-10.23)",
        },
        {
          key: "天蝎座",
          value: "天蝎座 (10.24-11.22)",
        },
        {
          key: "射手座",
          value: "射手座 (11.23-12.21)",
        },
        {
          key: "摩羯座",
          value: "摩羯座 (12.22-1.19)",
        },
        {
          key: "水瓶座",
          value: "水瓶座 (1.20-2.18)",
        },
        {
          key: "双鱼座",
          value: "双鱼座 (2.19-3.20)",
        },
      ],
    };
  },
  methods: {
    changeSelect() {
      localStorage.setItem("xingzuo", this.form.xingzuoSelect);
      this.getXingZuoData(this.form.xingzuoSelect);
    },
    getLocalStoreValue() {
      var select_value = localStorage.getItem("xingzuo");
      if (select_value == null || typeof select_value == "undefined") {
        select_value = "白羊座";
      }
      return select_value;
    },
    getLocalData(xingzuo) {
      var d = new Date();
      var todayYMD = d.format("yyyy-MM-dd");
      var ttl_time = localStorage.getItem(this.ttl_key);
      if (ttl_time == null || typeof ttl_time == "undefined") {
        ttl_time = -1;
      }
      var sub = d.getTime() - ttl_time;
      // 缓存时间
      if (sub > 300000) {
        return null;
      } else {
        this.content.common = localStorage.getItem(this.common_key);
        var xingzuo_data = localStorage.getItem(xingzuo);
        let xingzuoMap = JSON.parse(xingzuo_data);
        this.content.ri = xingzuoMap["ri"];
        this.content.zhou = xingzuoMap["zhou"];
        this.content.yue = xingzuoMap["yue"];
        this.content.nian = xingzuoMap["nian"];
        return "";
      }
    },
    parseHTMLV2(htmlStr) {
      var el = $(htmlStr);
      var xingzuoMap = {};
      var i = 0;
      $(el)
        .find("ul.nav-max > li")
        .each(function () {
          var xz = $(this).find("p").html();
          var riqi = $(this).find("span").html();
          xingzuoMap[xz] = {};
          xingzuoMap[xz].index = i;
          xingzuoMap[xz]["rq"] = riqi;
          i++;
        });

      var indexData = {};
      var xzIndex = 0;
      $(el)
        .find("div.bottom-box-left")
        .children(".dataList")
        .each(function () {
          indexData[xzIndex] = {};

          var xzConst = "";
          $(this).find("div.desc-box > div").each(function(){
            if($(this).html().indexOf('<img') < 0){
              xzConst+=$(this).html().replace(/<p>/g,"\n").replace(/[spani\/<> ]/g, "").replace(/\s{1,}/g,"\n");
            }            
          });

          var inIndex = 0;
          $(this)
            .find("div.bottom-box-left-in")
            .each(function () {
              if (inIndex == 0) {
                //日
                var text = xzConst+"\n";
                $(this)
                  .find(".lunck")
                  .find("li")
                  .each(function () {
                    text += $(this).html().split("</i>")[1].trim().replace(/[spani\/\s<> ]/g, " ").replace(/\s+/g," ") + "\n";
                  });
                text += $(this).find("p.desc-txt").html();
                indexData[xzIndex]["ri"] = text;
              } else if (inIndex == 1) {
                //周
                var text =
                  $(this)
                    .find("div.tit-box-txt")
                    .html()
                    .replace(/[spani\/\s<> ]/g, "") + "\n";
                    text+="Tips:";
                text +=
                  $(this)
                    .find("div.tit-dsc")
                    .html()
                    .replace(/[spani\/\s<> ]/g, "") + "\n";

                $(this)
                  .find(".lunck")
                  .find("li")
                  .each(function () {
                    text += $(this).html().split("</i>")[1].trim().replace(/[spani\/\s<> ]/g, " ").replace(/\s+/g," ") + "\n";
                  });
                text += $(this).find("p.desc-txt").html();
                indexData[xzIndex]["zhou"] = text;
              } else if (inIndex == 2) {
                //月
                var text =
                  $(this)
                    .find("div.tit-box-txt")
                    .html()
                    .replace(/[spani\/\s<> ]/g, "") + "\n";
                text += $(this).find("p.desc-txt").html();
                indexData[xzIndex]["yue"] = text;
              } else if (inIndex == 3) {
                //年
                var text =
                  $(this)
                    .find("div.tit-box-txt")
                    .html()
                    .replace(/[spani\/\s<> ]/g, "") + "\n";
                text = text + $(this).find("p.desc-txt").html().replace(/\s+/g,'') + "\n";
                var miniTab = {};
                var miniTabIdx = 0;
                $(this)
                  .find("ul.tabClick > li")
                  .each(function () {
                    miniTab[miniTabIdx] = $(this).html();
                    miniTabIdx++;
                  });

                var miniTabTextIdx = 0;
                $(this)
                  .find("ul.tabClick-txt > li")
                  .each(function () {
                    miniTab[miniTabTextIdx] = miniTab[miniTabTextIdx] + "\n";
                    $(this)
                      .find("p")
                      .each(function () {
                        miniTab[miniTabTextIdx] =
                          miniTab[miniTabTextIdx] + $(this).html().trim();
                      });
                    miniTabTextIdx++;
                  });
                text = text + "\n" + miniTab[0];
                text = text + "\n\n" + miniTab[1];
                text = text + "\n\n" + miniTab[2];
                text = text + "\n\n" + miniTab[3];
                indexData[xzIndex]["nian"] = text;
              }
              inIndex++;
            });
          xzIndex++;
        });

      var xingzuoDataMap = {};
      for (let item in xingzuoMap) {
        xingzuoDataMap[item] = indexData[xingzuoMap[item]["index"]];
      }

      var total = {};
      let commonInfo = "";
      let red = '小红榜:'
      $(el)
        .find("div.redflower > div.flower-in")
        .each(function () {
          let content = $(this).find("div").html() +":"+ $(this).find("p").html();
          red = red + "\n" + content;
        });

      let black = '小黑榜:'
      $(el)
        .find("div.blackflower > div.flower-in")
        .each(function () {
          let content = $(this).find("div").html() +":"+ $(this).find("p").html();
          black = black + "\n" + content;
        });

      commonInfo = commonInfo + red;
      commonInfo = commonInfo + "\n\n" + black;

      var timestamp = new Date().getTime();
      localStorage.setItem(this.ttl_key, timestamp);
      localStorage.setItem(this.common_key, commonInfo);
      for (let item in xingzuoDataMap) {
        localStorage.setItem(item, JSON.stringify(xingzuoDataMap[item]));
      }
      localStorage.setItem(
        this.xingzuo_data_key,
        JSON.stringify(xingzuoDataMap)
      );
    },
    getXingZuoData(xingzuo) {
      //get from local
      var localData = this.getLocalData(xingzuo);
      // 如果local已经过期
      if (localData == null || typeof localData == "undefined") {
        var _vue = this;
        var that = this.$axios;
        that
          .get("http://tools.2345.com/naonao/", {
            responseType: "blob",
            transformResponse: [
              function (data) {
                var reader = new FileReader();
                reader.readAsText(data, "GBK");
                reader.onload = function (event) {
                  that.data = reader.result;
                  _vue.parseHTMLV2(reader.result);
                  _vue.getLocalData(xingzuo);
                };
                return data;
              },
            ],
          }).then(response => {
            // do biz in reader.onload 
          });
      }
    },
  },
  created() {
    var xingzuo = this.getLocalStoreValue();
    this.form.xingzuoSelect = xingzuo;
    this.getXingZuoData(xingzuo);
  },
};
</script>

<style scoped></style>
